<template>
  <div>
    <div class="home-content">
      <div class="container">
        <div class="top-box">
          <div class="btns">
            <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
              <el-form-item label="">
                <el-cascader v-model="searchForm.companyId" placeholder="请选择公司名称" :options="companyArray" :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                  children: 'childList',
                }" @change="changeTreeItem" clearable></el-cascader>
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" clearable>
                  <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="bottom-box">
          <div class="left">
            <div class="czjl">
              <div class="title">
                <div class="circle"></div>
                操作记录
              </div>
              <div class="czjl-content">
                <div class="czjl-title">
                  <el-row>
                    <el-col :span="5" style="padding-left: 25px; font-size: 1.2rem; font-weight: bold;">鱼池编号</el-col>
                    <el-col :span="4" style="text-align: center; font-size: 1.2rem; font-weight: bold;">设备</el-col>
                    <el-col :span="4" style="text-align: center; font-size: 1.2rem; font-weight: bold;">执行动作</el-col>
                    <el-col :span="4" style="text-align: center; font-size: 1.2rem; font-weight: bold;">操作人</el-col>
                    <el-col :span="7" style="display: flex;justify-content: flex-end; padding-right:10px ; font-size: 1.2rem; font-weight: bold;">时间</el-col>
                  </el-row>

                </div>
                <div class="line"></div>
                <div class="list">
                  <div class="item" v-for="(item, index) in recordArray" :key="index">
                    <el-row style="width: 100%;">
                      <el-col :span="5" class="hover_title" :data-title="item.fishpondCode" style="padding-left: 25px; font-size: 1.2rem;">

                        {{ item.fishpondCode.length > 5 ? item.fishpondCode.slice(0, 5) + "..." : item.fishpondCode }}
                      </el-col>
                      <el-col class="hover_title" :data-title="item.deviceName" :span="4" style="text-align: center; padding-left: 10px; font-size: 1.2rem;">
                        {{ item.deviceName.length > 5 ? item.deviceName.slice(0, 5) + "..." : item.deviceName }}
                      </el-col>
                      <el-col :span="4" style="text-align: center; font-size: 1.2rem;">{{ item.value }}</el-col>
                      <el-col :span="4" style="text-align: center; font-size: 1.2rem;">{{ item.useName }}</el-col>
                      <el-col :span="7" style="display: flex;justify-content: flex-end; padding-right:10px;font-size: 1.2rem;">{{
                          item.createDate }}</el-col>
                    </el-row>

                  </div>
                </div>
              </div>
            </div>
            <div class="bjxx">
              <div class="title">
                <div class="circle"></div>
                报警信息
              </div>
              <div class="bjxx-content">
                <div class="bjxx-title">
                  <el-row style="width: 100%;">
                    <el-col :span="5" style="padding-left: 25px; font-size: 1.2rem; font-weight: bold;">鱼池编号</el-col>
                    <el-col :span="6" style="text-align: center; font-size: 1.2rem; font-weight: bold;">告警类型</el-col>
                    <el-col :span="6" style="text-align: center; font-size: 1.2rem; font-weight: bold;">数值</el-col>
                    <el-col :span="7" style="display: flex;justify-content: flex-end; padding-right:10px ; font-size: 1.2rem; font-weight: bold;">时间</el-col>
                  </el-row>

                </div>
                <div class="line"></div>
                <div class="list">
                  <div class="item" v-for="(item, index) in alarmArray" :key="index">
                    <el-row style="width: 100%;">
                      <el-col :span="5" style="padding-left: 25px; font-size: 1.2rem;">{{ item.fishpondCode }}</el-col>
                      <el-col :span="6" style="text-align: center; font-size: 1.2rem;">{{ item.alarmType }}</el-col>
                      <el-col :span="6" style="text-align: center; font-size: 1.2rem;">{{ item.value }}</el-col>
                      <el-col :span="7" style="display: flex;justify-content: flex-end; padding-right:10px ;font-size: 1.2rem;">{{
                          item.startTime }}</el-col>
                    </el-row>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="kzx">
              <div class="kzx-box" v-for="(item, index) in boxArray" :key="index">
                <div class="kzx-title" style="font-size: 2rem; font-weight: bold;">
                  {{ item.name }}
                </div>
                <div class="type" v-if="item.type == 0" style="font-size: 1.7rem; font-weight: bold;">手动自动模式</div>
                <div class="mosi" v-if="item.type == 0">
                  <div class="item">
                    <div class="item-name" :class="{ active: item.inWaterModel == 0 }">手动抽水模式</div>
                    <div class="item-img">
                      <img v-if="item.inWaterModel == 0" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>
                  </div>
                  <div class="item">
                    <div class="item-name" :class="{ active: item.inWaterModel == 1 }">自动抽水模式</div>
                    <div class="item-img">
                      <img v-if="item.inWaterModel == 1" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>

                  </div>
                  <div class="type" v-if="item.type == 0" style="font-size: 1.7rem; font-weight: bold;margin-top: 2rem;">
                    手动自动水泵状态</div>
                  <!-- <div class="bootom_item"> -->
                  <div></div>
                  <div class="item" style="margin-top: 2.5rem;">

                    <div class="item-name" :class="{ active: item.inPumpStatus == 1 }">水泵1自动</div>
                    <div class="item-img">
                      <img v-if="item.inPumpStatus == 1" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>
                  </div>
                  <div class="item" style="margin-top: 2.5rem;">
                    <div class="item-name" :class="{ active: item.inPumpStatus == 2 }">水泵2自动</div>
                    <div class="item-img">
                      <img v-if="item.inPumpStatus == 2" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>
                  </div>
                  <div class="item">
                    <div class="item-name" :class="{ active: item.inPumpStatus == 3 }">停用</div>
                    <div class="item-img">
                      <img v-if="item.inPumpStatus == 3" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>
                  </div>
                  <div class="item">
                    <div class="item-name" :class="{ active: item.inPumpStatus == 4 }">自流</div>
                    <div class="item-img">
                      <img v-if="item.inPumpStatus == 4" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>
                  </div>
                  <!-- </div> -->

                </div>
                <div class="type" v-if="item.type == 2" style="font-size: 1.7rem; font-weight: bold;">尾水控制模式</div>
                <div class="mosi " v-if="(item.type == 2)">
                  <div class="item" style="margin-top: 3rem;">
                    <div class="item-name" :class="{ active: item.tailWaterModel == 0 }" style="font-size: 1.2rem; font-weight: bold; width: 10rem;">
                      排污模式
                    </div>
                    <div class="item-img">
                      <img v-if="(item.tailWaterModel == 0)" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>
                  </div>
                  <div class="item" style="margin-top: 3rem;">
                    <div class="item-name" :class="{ active: item.tailWaterModel == 1 }" style="font-size: 1.2rem; font-weight: bold; width: 10rem;">
                      换水模式
                    </div>
                    <div class="item-img">
                      <img v-if="(item.tailWaterModel == 1)" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>
                  </div>

                  <div class="item" style="margin-top: 8rem;">
                    <div class="item-name" :class="{ active: item.tailWaterModel == 2 }" style="font-size: 1.2rem; font-weight: bold; width: 10rem;">
                      上清水模式
                    </div>
                    <div class="item-img">
                      <img v-if="(item.tailWaterModel == 2)" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>
                  </div>
                  <div class="item" style="margin-top: 8rem;">
                    <div class="item-name" :class="{ active: item.tailWaterModel == 3 }" style="font-size: 1.2rem; font-weight: bold; width: 10rem;">
                      故障
                    </div>
                    <div class="item-img">
                      <img v-if="(item.tailWaterModel == 3)" class="kai" src="@/assets/home/statuszc.png" />
                      <img v-else class="guan" src="@/assets/home/statusyc.png" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="kzg-yc">
              <div class="kzg-yc-box" v-for="(item, index) in fishpondArray" :key="index">
                <div class="kzg">
                  <div class="kzg-title" style="font-size: 2rem; font-weight: bold;" @click="getbox(item)">
                    {{ item.name }}
                  </div>
                  <div class="list" style="font-size: 1.5rem; font-weight: bold;">
                    <div class="item" v-for="(sb, key1) in item.devices" :key="key1">
                      <!-- value改编成了realDataConvert -->
                      <!-- {{ sb.deviceName }}：<span style="color:#0000FE;">{{ sb.value }}{{ sb.unit }}</span> -->
                      {{ sb.deviceName }}：<span style="color:#0000FE; padding-left: 0.5rem;">{{ sb.realDataConvert }} {{
                        sb.unit }}</span>
                    </div>
                  </div>
                </div>
                <div class="yc">
                  <div class="item" v-for="(yc, key2) in item.fishpondDevices" :key="key2">
                    <div class="yc-title">
                      {{ yc.fishpondName }}
                    </div>
                    <div class="list">
                      <div class="yc-status">
                        鱼池状态：
                        <span v-if="yc.status == 0" style="color:#0000FE;">正常</span>
                        <span v-if="yc.status == 1" style="color:#0000FE;">投食</span>
                        <span v-if="yc.status == 2" style="color:#0000FE;">消食</span>
                        <span v-if="yc.status == 3" style="color:#0000FE;">消毒</span>
                      </div>
                      <div class="ycsb-list">
                        <div class="ycsb-item" v-for="(ycsb, key3) in yc.fishpondDeviceNames" :key="key3">
                          {{ ycsb.deviceName }}：<span style="color:#0000FE;">{{ ycsb.value }}{{ ycsb.unit }}</span>
                        </div>
                      </div>
                    </div>

                  </div>

                </div>
              </div>
              <div class="line"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDataHisSwitchList, getDataHisAlarmList, getInWaterTailWaterObjBoxs, getObjBoxFishpondDeviceList } from '@/api/home'
import { getCompanyInfoTree } from '@/api/company'
import { getSysCompanyBases } from '@/api/system'
export default {
  components: {},
  // 表格数据
  data() {
    return {
      // 查询字段
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        userType: '',
        companyId: '',
        baseId: ''
      },
      recordArray: [],
      alarmArray: [],
      boxArray: [],
      fishpondArray: [],
      companyArray: [],
      baseArray: [],
      recordCount: 1
    }
  },
  // 初始化加载
  mounted() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
    this.getCompanyInfoTree()
  },

  // 自定义方法
  methods: {
    // 跳转到控制箱
    getbox(item) {
      console.log(item)
      this.$router.push({
        path: `/device/sysBoxDetail?id=` + item.id + '&code=' + item.code + '&name=' + item.name
      })
    },
    getDataHisSwitchList() {
      getDataHisSwitchList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.recordArray = res.data.data
        }
      })
    },
    getDataHisAlarmList() {
      getDataHisAlarmList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.alarmArray = res.data
        }
      })
    },
    getInWaterTailWaterObjBoxs() {
      getInWaterTailWaterObjBoxs(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.boxArray = res.data
        }
      })
    },
    getObjBoxFishpondDeviceList() {
      getObjBoxFishpondDeviceList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.fishpondArray = res.data.data
          console.log(this.fishpondArray)
        }
      })
    },
    getCompanyInfoTree() {
      if (!this.searchForm.userType) {
        return
      }

      if (this.searchForm.userType == 0) {
        // 超级管理员，公司只有一个总公司
        this.companyArray = [
          {
            id: 0,
            name: '总公司',
            parentId: 0
          }
        ]
      } else {
        getCompanyInfoTree({ id: 0 }).then((res) => {
          if (res.code == 200) {
            this.companyArray = res.data
            if (res.data.length > 0) {
              this.searchForm.companyId = res.data[0].id
              this.getSysCompanyBases()
            }
          }
        })
      }
    },
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1]
      } else {
        this.searchForm.companyId = ''
      }

      this.searchForm.baseId = ''
      this.baseArray = []

      // 获取基地列表
      this.getSysCompanyBases()
    },
    getSysCompanyBases() {
      if (this.searchForm.companyId === '' || this.searchForm.companyId == null) {
        return
      }

      getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
        if (res.code == 200) {
          this.baseArray = res.data
          if (res.data.length > 0) {
            this.searchForm.baseId = res.data[0].id
            this.getDataHisSwitchList()
            this.getDataHisAlarmList()
            this.getInWaterTailWaterObjBoxs()
            this.getObjBoxFishpondDeviceList()
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
  display: none;
  // width: 4px;
  // height: 10px;
}

/*滚动条里面小方块*/
// ::-webkit-scrollbar-thumb {
//   border-radius: 10px;
//   background: #48a0f8;
// }

// /*滚动条里面轨道*/
// ::-webkit-scrollbar-track {
//   border-radius: 10px;
//   background: #ededed;
// }

// 鼠标移入清除省略号
.hover_title[data-title] {
  position: relative;

  // 样式：
  &:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
  }

  // 背景的样式 位置 字体等
  &:after {
    content: attr(data-title);
    position: absolute;
    padding: 1px 10px;
    left: 50px;
    bottom: -1.8em;
    // right: 0.5rem;
    border-radius: 4px;
    color: #fff;
    background-color: rgba(80, 79, 79, 0.8);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
    font-size: 14px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
  }
}

.home-content {
  // min-height: calc(100vh - 90px);
  width: 100%;
  background: #2a2d3c;

  .container {
    .top-box {
      width: 100%;
      height: 5.36rem;
      padding-left: 1.39rem;
      padding-top: 1.21rem;
      border-bottom: 5px solid #373b44;

      .btns {
        display: flex;

        .btn {
          width: 7.07rem;
          height: 2.79rem;
          background-color: #e3e3e5;
          text-align: center;
          line-height: 2.79rem;
          margin-right: 0.85rem;
          border-radius: 0.14rem;
          font-size: 1.29rem;
          color: #333333;
          cursor: pointer;
        }
      }
    }

    .bottom-box {
      // height: 53.57rem;
      width: 100%;
      display: flex;

      .title {
        display: flex;
        margin-top: 1.21rem;
        margin-bottom: 0.57rem;
        align-items: center;
        font-size: 1.43rem;
        font-weight: bold;
        color: #ffffff;

        .circle {
          width: 5px;
          height: 5px;
          background: #2ce11a;
          border-radius: 50%;
          margin-right: 5px;
        }
      }

      .left {
        width: 45%;
        height: 100%;
        padding-left: 1.39rem;
        border-right: 5px solid #373b44;

        .czjl {
          .czjl-content {
            width: 97%;
            height: 30rem;
            padding: 20px 0px;
            border-radius: 0.43rem;
            border: 0.07rem solid rgba(124, 124, 124, 0.12);
            background-color: #f2f2f2;
            display: flex;
            flex-direction: column;
            align-items: center;

            .czjl-title {
              .el-row {
                width: 100%;
              }

              width: 96%;
              display: flex;
              // justify-content: space-around;
            }

            .line {
              height: 2px;
              width: 96%;
              margin-top: 1rem;
              margin-bottom: 1rem;
              background-color: black;
            }

            .list {
              width: 96%;

              .item {
                width: 100%;
                display: flex;
                justify-content: space-around;
              }
            }
          }
        }

        .bjxx {
          .bjxx-content {
            width: 97%;
            height: 30rem;
            padding: 20px 0px;
            margin-bottom: 20px;
            border-radius: 0.43rem;
            border: 0.07rem solid rgba(124, 124, 124, 0.12);
            background-color: #f2f2f2;
            display: flex;
            flex-direction: column;
            align-items: center;

            .bjxx-title {
              width: 96%;
              display: flex;
              justify-content: space-around;
            }

            .line {
              height: 2px;
              width: 96%;
              margin-top: 1rem;
              margin-bottom: 1rem;
              background-color: black;
            }

            .list {
              width: 96%;
              height: 90%;
              overflow: hidden;

              .item {
                width: 100%;
                display: flex;
                justify-content: space-around;
                margin-bottom: 0.86rem;
              }
            }
          }
        }
      }

      .right {
        width: 60%;
        height: 100%;

        .kzx {
          width: 100%;
          border-bottom: 5px solid #373b44;
          padding: 1rem 0;
          display: flex;
          justify-content: space-around;

          .kzx-box {
            width: 45%;
            height: 28rem;
            background: #f2f2f2;
            border-radius: 0.43rem;
            border: 0.07rem solid rgba(124, 124, 124, 0.12);
            display: flex;
            flex-direction: column;
            align-items: center;

            .type {
              // display: grid;
              width: 95%;
              // margin-right: 5%;
              // justify-items: center;
              margin-top: 1rem;

              // grid-template-columns: 1fr 1fr;
            }

            .bootom_item {
              // display: grid;
              // grid-template-columns: 1fr 1fr;

              // grid-template-columns:1fr, 1fr;
            }

            .kzx-title {
              font-size: 1.14rem;
              margin-top: 0.71rem;
            }

            .mosi {
              width: 95%;
              display: grid;
              margin-right: 5%;
              // margin-top: 2.29rem;
              // justify-content: space-around;
              grid-template-columns: 1fr 1fr;
              justify-items: center;
              align-items: center;
              // flex-wrap: wrap;

              .item {
                height: 2.14rem;
                display: flex;
                align-items: center;
                margin-top: 2rem;
                margin-left: 1rem;

                // justify-items: center;
                .active {
                  background-image: url(../../../assets/home/bc.png);
                }

                .item-name {
                  width: 11rem;
                  height: 3rem;
                  // border: 0.04rem solid #575D5B;
                  background-color: #c2bfbf;
                  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) inset;
                  font-size: 1.6rem !important;
                  color: #ffffff;
                  text-align: center;
                  font-weight: bold;
                  line-height: 3rem;
                  margin-right: 0.5rem;
                }

                .item-img {
                  width: 2.3rem;
                  height: 2.3rem;
                  // margin-left: 0.5rem;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }

        .kzg-yc {
          width: 100%;
          padding-left: 1.39rem;

          .kzg-yc-box {
            width: 100%;
            min-height: 27.64rem;
            display: flex;
            align-items: center;

            .kzg {
              width: 35%;
              height: 45rem;
              border-radius: 0.43rem;
              background: #f2f2f2;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-bottom: 2rem;
              margin-top: 2rem;

              .kzg-title {
                font-size: 1.14rem;
                margin-top: 1.59rem;
                margin-bottom: 1.59rem;
              }

              .list {
                // width: 90%;
                font-size: 1.14rem;

                .item {
                  margin-bottom: 2rem;
                }
              }
            }

            .yc {
              padding-left: 1.3rem;
              padding-right: 2rem;
              width: 65%;
              height: 45rem;
              display: flex;
              flex-wrap: wrap;
              // grid-template-columns: repeat(1fr, 1fr);
              justify-content: space-between;
              // align-content: space-between;
              overflow: auto;

              .item {
                width: 42%;
                font-weight: bold;
                font-size: 1.3rem;
                min-height: 8.5rem;
                background: #f2f2f2;
                border-radius: 0.43rem;
                border: 0.07rem solid rgba(124, 124, 124, 0.12);
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 1rem;

                .yc-title {
                  font-size: 1.5rem;
                  font-weight: bold;
                  margin-top: 0.97rem;
                  margin-bottom: 0.97rem;
                }

                .yc-status {
                  margin-top: 0.5rem;
                  margin-bottom: 1rem;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>